/* eslint-disable react/prop-types */
import React from 'react';
import { withRouter } from 'react-router-dom';
import { Button, Select } from 'antd';
import '@/pages/mysite/mysite.scss';

const { Option } = Select;
class Home extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            handler: ''
        }
    }

    //批量操作
    onSelect = (value) => {
        this.setState({ handler: value })
    }

    render() {
        const { btns, batch } = this.props;
        const btnsGroup = (btns || []).map((item, index) => {
            return (
                <Button key={index} type={item.theme} onClick={() => item.action()}>{item.name}</Button>
            )
        });
        const batchOpion = (batch.options || []).map((item, index) => {
            return (
                <Option key={index} value={item.value}>{item.name}</Option>
            )
        });
        let batchBox;
        if (batchOpion.length > 0) {
            batchBox = (
                <span className="table_batch">
                    <Select style={{ width: 160, marginLeft: 15 }} placeholder="批量操作" onSelect={this.onSelect}>{batchOpion}</Select>
                    <Button type="primary" ghost style={{ marginLeft: 12 }} onClick={() => batch.action(this.state.handler)}>确定</Button>
                </span>
            );
        }
        return (
            <div className="table_handle">
                <span className="table_title">数据列表</span>
                {batchBox || ''}
                <div className="btn_group">
                    {btnsGroup}
                </div>
            </div>
        )
    }
}

export default withRouter(Home)
